<template>
  <view class="mine">
    <view style="padding: 27px 20px;">
      <view class="list"  @click="handlenotification()">
        <view class="list-detail">
          <view style="width: 187rpx;">微信绑定</view>
        </view>
	    <view style="margin-left: 104px;color: #999;display: flex;">
	        <view style="width: 21px;height: 21px;margin-top: -2px;margin-right: 6px;" v-if="bingding == 2">
	            <image style="width: 100%;height: 100%;border-radius: 50%;" :src="userUrl" mode=""></image>
	        </view>
	        {{ bingding == 1 ? "点击进行微信绑定" : this.userName }}
	    </view>
		<view style="width: 12px;height: 12px;margin-top: -5px;">
		    <image src="../../static/image/right.png" style="width: 100%;height: 100%;"></image>
		</view>
      </view>
    </view>
	
	<!-- 解绑弹窗 -->
	<view class="modal" v-if="unbinding">
		<view class="modal-cont">
			<view class="modal-title" style="display: flex;">
					<view style="width: 23px;height: 22px;margin-right: 7px;">
						<image style="width: 100%;height: 100%;" src="../../static/image/exit_iocn.png" mode=""></image>
					</view>
					是否解除微信绑定
				</view>
				<view style="margin-top: 20px;">
					<span>解除绑定后将无法使用
					<span style="font-weight: 550;">{{this.userName}}</span>
						微信登录
					</span>
				</view>
			<view class="modal-bottom">
				<view class="btn-cancel" @click="unbinding = false">取消</view>
				<view class="btn-sure" @click="unbundling()">解除绑定</view>
			</view>
		</view>
	</view>
	
  </view>
</template>

<script>
export default {
  data() {
    return {
      bingding: 1,//1 未绑定 2 已绑定
      userName: null,
      userUrl: null,
	  unbinding:false,
    }
  },
  onShow() {
    this.checkLogin();//验证是否登录
    this.ownerInfo();//获取绑定信息
  },
  methods: {
	  //点击打开弹窗
	  handlenotification(){
	  	if(this.bingding==2){
	  		this.unbinding = true
	  	}else{
	  		this.unbundling()
	  	}
	  	
	  },
    async ownerInfo() {
      let res = await this.$request.api.getUserInfo({
        user_id: uni.getStorageSync('rawData').userId,
        state:2,//2.业主端 3.员工端 4.助业网
      });
      this.bingding = 1 //未绑定
      if (res.data.data.user_open_id != null) {
        this.bingding = 2//已绑定
      }
      this.userName = res.data.data.nickName//用户名
      this.userUrl = res.data.data.avatarUrl//头像
    },

    unbundling() {
      if (this.bingding == 2) {//解绑
        this.$request.api.wxunbundling({
          user_id: uni.getStorageSync('rawData').userId,
          bingding: this.bingding,//1 未绑定 2 已绑定,
          state:2,//2.业主端 3.员工端 4.助业网
        }).then(resp => {
          if (resp.data.code === 0) {
            uni.showToast({
              icon: 'none',
              title: resp.data.msg
            });
            this.bingding = 1//未绑定
			this.unbinding = false
          } else {
            uni.showToast({
              icon: 'none',
              title: resp.data.msg
            });
          }
        })
      } else {
        uni.getProvider({
          service: 'oauth',
          success: res => {
            console.log(res.provider);
            //支持微信、qq和微博等
            if (~res.provider.indexOf('weixin')) {
              uni.login({
                provider: 'weixin',
                success: loginRes => {
                  uni.getUserInfo({//获取微信用户基本信息
                    provider: 'weixin',
                    success: infoRes => {
                      //根据openId校验该用户是否微信授权登录过
                      this.$request.api.wxunbundling({
                        open_id: infoRes.userInfo.openId,//微信openId
                        nickName: infoRes.userInfo.nickName,//微信用户名
                        avatarUrl: infoRes.userInfo.avatarUrl,//微信头像
                        user_id: uni.getStorageSync('rawData').userId,
                        bingding: this.bingding,
                        state:2,//2.业主端 3.员工端 4.助业网
                      }).then(resp => {
                        if (resp.data.code === 0) {
                          uni.showToast({
                            icon: 'none',
                            title: resp.data.msg
                          });
                          this.bingding = 2//已绑定
                          this.userName =  infoRes.userInfo.nickName//名称
                          this.userUrl = infoRes.userInfo.avatarUrl//头像
                        } else {
                          uni.showToast({
                            icon: 'none',
                            title: resp.data.msg
                          });
                        }
                      })
                    }
                  });
                }
              });
            }
            ;
          },
        });
      }
    },

    // 验证是否登录或实名认证
    checkLogin() {
      let _this = this
      if (uni.getStorageSync('phone')) {
        if (uni.getStorageSync('loginFlag')) {
          if (!uni.getStorageSync('hourseList')) {
            this.$openInvite()
          }
        } else {
          uni.showModal({
            title: '请先实名认证',
            showCancel: false,
            confirmText: '确认',
            confirmColor: '#F9A832',
            success: function (res) {
              if (res.confirm) {
                _this.$Router.push({
                  path: '/pages/realName/realName'
                })
              }
            }
          });
        }
      } else {
        uni.showModal({
          title: '请先登录',
          showCancel: false,
          confirmText: '确认',
          confirmColor: '#F9A832',
          success: function (res) {
            if (res.confirm) {
              console.log('a')
              _this.$Router.pushTab({
                path: '/pages/user/user'
              })
            }
          }
        });
      }

    },
  }
}
</script>

<style lang="scss">
.mine {
  .list {
    padding: 0 36 rpx 0 31 rpx;
    background: #FFF;
    line-height: 120 rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    color: #333333;
    font-size: 32 rpx;
    border-bottom: 1 rpx solid #EEEEEE;
	font-size: 14px;
	
    .cont-all {
      font-size: 28 rpx;
      font-weight: 400;
      color: #999999;
      text-shadow: 0 rpx 2 rpx 0 rpx #EEEEEE;
    }
    .list-detail {
      display: flex;
      align-items: center;

      .left {
        width: 48 rpx;
        height: 48 rpx;
        margin-right: 25 rpx;
      }
    }
    .herder-logo {
      display: flex;
      align-items: center;

      .logo-image {
        width: 60 rpx;
        height: 60 rpx;
        background: #D8D8D8;
        border-radius: 30 rpx;
        margin-right: 29 rpx;
      }

      .right {
        width: 22 rpx;
        height: 36 rpx;
      }
    }
    .right {
      width: 22 rpx;
      height: 36 rpx;
    }
  }
  .modal {
  	/* width: 100%;
  	height: 100vh;
  	position: fixed;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	background: rgba($color: #000000, $alpha: 0.6);
  	z-index: 999; */
  	position: fixed;
  	top: 0%;
  	left: 0%;
  	width: 100%;
  	height: 100%;
  	background-color: rgba(0, 0, 0, 0.8);
  	z-index: 10;
  }
  	.modal-cont {
  		width: 610rpx;
  		// min-height: 420rpx;
  		background: #ffffff;
  		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
  		border-radius: 24rpx;
  		display: flex;
  		flex-direction: column;
  		align-items: center;
  		position: absolute;
  		top: 50%;
  		left: 50%;
  		transform: translate(-50%, -50%);
  }
  	.modal-icon {
  		width: 80rpx;
  		height: 80rpx;
  		margin-top: 67rpx;
  	}
  
  	.modal-title {
  		font-size: 19px;
  		font-family: PingFangSC-Medium, PingFang SC;
  		font-weight: 550;
  		color: #333333;
  		line-height: 45rpx;
  		margin-top: 26px;
  	}
  
  	.modal-content {
  		width: 443rpx;
  		// height: 88rpx;
  		font-size: 28rpx;
  		text-align: center;
  		font-family: PingFangSC-Regular, PingFang SC;
  		font-weight: 400;
  		color: #999999;
  		line-height: 44rpx;
  		margin-top: 24rpx;
  	}
  
  	.text-area {
  		margin-top: 24rpx;
  		width: 520rpx;
  		padding: 10rpx;
  		font-size: 28rpx;
  		font-family: PingFangSC-Regular, PingFang SC;
  		font-weight: 400;
  		line-height: 44rpx;
  		max-height: 105rpx;
  		border: 1rpx solid #f0f0f0;
  		border-radius: 8rpx;
  	}
  
  	.modal-bottom {
  		width: 100%;
  		height: 84rpx;
  		border-top: 1rpx solid #e6e9ed;
  		display: flex;
  		justify-content: space-between;
  		align-items: center;
  		margin-top: 50rpx;
  	}
  	.btn-cancel {
  		width: 50%;
  		height: 84rpx;
  		text-align: center;
  		line-height: 84rpx;
  		border-right: 1rpx solid #d8d8d8;
  		font-size: 28rpx;
  		font-family: PingFangSC-Regular, PingFang SC;
  		font-weight: 400;
  		color: #333333;
  		box-sizing: border-box;
  	}
  	.btn-cancel1 {
  		width: 100%;
  		height: 84rpx;
  		text-align: center;
  		line-height: 84rpx;
  		/* border-right: 1rpx solid #d8d8d8; */
  		font-size: 28rpx;
  		font-family: PingFangSC-Regular, PingFang SC;
  		font-weight: 400;
  		color: #333333;
  		box-sizing: border-box;
  	}
  
  	.btn-sure {
  		width: 50%;
  		height: 84rpx;
  		text-align: center;
  		line-height: 84rpx;
  		font-size: 28rpx;
  		font-family: PingFangSC-Regular, PingFang SC;
  		font-weight: 400;
  		color: #578ef0;
  	}
}
</style>
